<template>
	<view class="uni-container">
		<uni-forms>
			<uni-forms-item label="展示图片" name="title" labelWidth="120">
				<uni-file-picker :value="appIntroduce.showImg" :limit="1" :imageStyles="imageStyles" @success="success"
					file-mediatype="image"></uni-file-picker>
			</uni-forms-item>
			<uni-forms-item label="设置标语" name="title" labelWidth="120">
				<textarea class="uni-input-border textarea" placeholder="请输入应用简介" v-model="appIntroduce.slogan"></textarea>
			</uni-forms-item>
			<uni-forms-item label="简介内容" name="title" labelWidth="120">
				<view v-if="appIntroduce.content.length" v-for="(item,index) in appIntroduce.content" :key="index"
					class="content">
					<text class="show-text">{{item}}</text>
					<uni-icons @click="sub(index)" size="25" type="minus" style="margin-right: 15rpx;"></uni-icons>
				</view>
				<view class="addLine">
					<input class="uni-input-border" placeholder="请输入简介内容" type="text" v-model="contentLine" />
					<view @click="add" type="warn" class="add-btn">
						<text class="add-btn-text">添加</text>
						<uni-icons size="25" type="plus"></uni-icons>
					</view>
				</view>
			</uni-forms-item>
		</uni-forms>
		<view class="btn-box">
			<button class="btn" type="primary" @click="submitForm">保存</button>
		</view>
		
	</view>
</template>

<script>
	const getconfigObj = uniCloud.importObject('getconfig', {
		loadingOptions: { // loading相关配置
			title: '处理中...', // 显示的loading内的提示文字。默认值为：加载中...
			mask: true // 是否使用透明遮罩，配置为true时不可点击页面其他内容。默认值为：true
		},
		errorOptions: { // 错误界面相关配置
			type: 'toast', // 错误信息展示方式，可取值：modal（弹框，默认）、toast（toast消息框）。默认值为：modal
			retry: false // 是否展示重试按钮，仅在type为modal时生效。用户点击重试按钮时将重新请求调用的方法，默认为false
		}
	})
	export default {
		data() {
			return {
				"appIntroduce": {
					"slogan": "",
					"content": [],
					"showImg": {
						url: '',
						extname: 'png',
						name: 'shuijiao.png'
					},
				},
				"contentLine": "",
				imageStyles: {
					width: 120,
					height: 120,
					border: {
						radius: '10%'
					}
				}
			}
		},
		onLoad() {
			this.getData()
		},
		methods: {
			getData() {
				getconfigObj.getConfig().then((res) => {
					console.log("res:----- ", res);
					this.appIntroduce = res.data[1]
				}).catch((err) => {
					console.log("err: ", err);
				})
			},
			add() {
				if(!this.contentLine){
					uni.showToast({
						title: '请输入简介内容',
						icon:"error"
					});
					return
				}
				this.appIntroduce.content.push(this.contentLine)
				this.contentLine = ""
			},
			sub(index) {
				this.appIntroduce.content.splice(index, 1)
			},
			submitForm() {
				console.log("this.appIntroduce: ", this.appIntroduce);
				getconfigObj.updateConfig({
					"_id": "appIntroduce",
					...this.appIntroduce
				}).then((res) => {
					console.log("res:-----updateConfig ", res);
					if (res.updated) {
						uni.showToast({
							title: '更新成功！',
							icon: "none",
							duration: 1000
						});
					}else{
						uni.showToast({
							title: '未提交更新内容！',
							icon: "none",
							duration: 1000
						});
					}
				}).catch((err) => {
					console.log("err: ", err);
				})
			},
			// 获取上传状态
			select(e) {
				console.log('选择文件：', e)
			},
			// 获取上传进度
			progress(e) {
				console.log('上传进度：', e)
			},

			// 上传成功
			success(e) {
				console.log('上传成功', e)

				this.appIntroduce.showImg = e.tempFiles[0]
			},

			// 上传失败
			fail(e) {
				console.log('上传失败：', e)
			}

		}
	}
</script>

<style>
	.uni-container {
		padding: 15px;
	}

	.btn {
		width: 100px;
		justify-self: left;
	}

	.textarea {
		height: 100px;
		padding-top:15rpx;
	}

	.addLine {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-top: 20px;
	}

	/deep/ .uni-forms-item__content[data-v-61dfc0d0] {
		display: inline-block !important;
	}

	.add-btn {
		width: 120px;
		height:35px;
		background-color: #aaaaff;
		border-radius: 15rpx;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		margin-left:15rpx;
		border: #EEEEEE solid 1px;
	}
	.add-btn-text{
		line-height: 35px;
		margin-right:10rpx;
	}

	.content {
		width: 80%;
		border-radius: 10px;
		margin-bottom: 15px;
		border: #aaaaff solid 1px;
		display: flex;
		align-items: center;
	}
	
	.show-text {
		width: 450px;
		margin: 20rpx;
		white-space: pre-wrap;
		border-radius: 10px;
	}
	.btn-box{
		max-width:650px;
	}
</style>
